<template>
  <ul>
    <router-link
      :to="'/content/service?id=' + id"
      v-slot="{ navigate, isActive }"
      custom
      ><li :class="isActive ? 'color' : ''" @click="navigate">
        服务
      </li></router-link
    >

    <router-link
      :to="'/content/dynamic?id=' + id"
      v-slot="{ navigate, isActive }"
      custom
      ><li :class="isActive ? 'color' : ''" @click="navigate">
        动态
      </li></router-link
    >
  </ul>
</template>
<script>
export default {
  data () {
    return {
      id: 0
    }
  },
  created () {
    this.id = location.href.match(/id=(\d+)/)[1]
  }
}
</script>
<style lang="scss" scoped>
ul {
  display: flex;
  height: 45px;
  line-height: 45px;
  width: 100%;
  background: #fff;
  margin-bottom: 8px;
  li {
    flex: 1;
    text-align: center;
  }
}
.color {
  color: #f40;
  border-bottom: 2px solid #f40;
}
</style>
